<template>
    <div class="bottom-view">
      <el-row :gutter="20">
        <el-col :span="12">
         <el-card shadow="hover">
           <div slot="header">
             <div class="header3">
               关键词搜索
             </div>
           </div>
           <div class="content-wrapper">
             <div class="charts">
               <div class="charts-item">
                 <div class="title">
                   <h2>搜索用户数</h2>
                   <div class="count">{{userCount | format}}</div>
                 </div>
                 <vue-echarts :options="searchUserOptions"/>
               </div>
               <div class="charts-item">
                 <div class="title">
                   <h2>搜索用户数</h2>
                   <div class="count">{{searchCount | format}}</div>
                 </div>
                 <vue-echarts :options="searchNumberOptions"/>
               </div>
             </div>
             <div class="table-wrapper">
               <el-table
                 :data="tableData"
                 style="width: 100%">
                 <el-table-column
                   prop="rank"
                   label="排名"
                   width="180">
                 </el-table-column>
                 <el-table-column
                   prop="keyword"
                   label="关键词"
                   width="180">
                 </el-table-column>
                 <el-table-column
                   prop="total"
                   label="总销量">
                 </el-table-column>
                 <el-table-column
                   prop="users"
                   label="搜索用户数">
                 </el-table-column>
               </el-table>
               <el-pagination
                 background
                 layout="prev, pager, next"
                 :page-size="pageSize"
                 @current-change="onPageChange"
                 :total="total">
               </el-pagination>
             </div>
           </div>
         </el-card>
        </el-col>
        <el-col :span="12" class="pie-wrapper">
          <el-card shadow="hover">
            <div slot="header" class="header-wrapper">
              <div class="header3">分类销售排行</div>
              <el-radio-group v-model="saleRankSelect" size="small" @change="saleChange">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="pie-charts">
              <vue-echarts :options="pieOptions" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import CommonDataMixin from '../../utils/CommonDataMixin'
export default {
  name: 'BottomView',
  mixins: [CommonDataMixin],
  data () {
    return {
      totalData: [],
      tableData: [],
      searchUserOptions: {},
      searchNumberOptions: {},
      keyOptions: {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'line',
            data: [89, 120, 320, 270, 120, 305],
            areaStyle: {
              color: 'rgba(95,187,255,.5)'
            },
            lineStyle: {
              color: 'rgb(95,187,255)'
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }
        ]
      },
      saleRankSelect: '品类',
      pieOptions: {},
      total: 0,
      pageSize: 4,
      userCount: 0,
      searchCount: 0
    }
  },
  methods: {
    renderPie () {
      // 设置legend 需要数据中必须有neme属性
      if (!this.category1 || !this.category2) {
        return 0
      }
      if (!this.category1.data1 || !this.category2.data1) {
        return 0
      }
      let data
      let axios
      let total
      if (this.saleRankSelect === '品类') {
        data = this.category1.data1
        axios = this.category1.axisX
        total = data.reduce((s, i) => s + i, 0)
      } else {
        data = this.category2.data1
        axios = this.category2.axisX
        total = data.reduce((s, i) => s + i, 0)
      }
      const chartData = []
      data.forEach((item, index) => {
        const percent = `${((item / total) * 100).toFixed(2)}`
        chartData.push({
          legendname: axios[index],
          value: item,
          percent: percent,
          name: `${axios[index]} | ${percent}`
        })
      })
      // const mockData = [
      //   {
      //     legendname: '粉面粥店',
      //     value: 67,
      //     percent: '11.23',
      //     itemStyle: {
      //       color: '#5085f2'
      //     },
      //     name: '粉面粥店 | 11.23%'
      //   },
      //   {
      //     legendname: '简餐便当',
      //     value: 97,
      //     percent: '22.33',
      //     itemStyle: {
      //       color: '#8d7fdc'
      //     },
      //     name: '简餐便当 | 22.33%'
      //   },
      //   {
      //     legendname: '汉堡披萨',
      //     value: 92,
      //     percent: '21.94',
      //     itemStyle: {
      //       color: '#FFCD41'
      //     },
      //     name: '汉堡披萨 | 21.94%'
      //   }
      // ]
      this.pieOptions = {
        title: [
          {
            text: `${this.saleRankSelect}分布`,
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          {
            text: '累计订单量',
            subtext: 390,
            x: '34.5%',
            y: '42.5%',
            textAlign: 'center',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            }
          }
        ],
        series: [
          {
            name: `${this.saleRankSelect}分布`,
            type: 'pie',
            data: chartData,
            label: {
              show: true,
              position: 'outer', // inner
              formatter: function (params) {
                  return params.data.legendname
              }
            },
            center: ['35%', '50%'], // 中心位置
            radius: ['45%', '60%'], // 设置环形 默认是 0~75%
            labelLine: {
              length: 5,
              length2: 5,
              smooth: true
            },
            clockwise: true, // 选择方向
            itemStyle: {
              borderWidth: 4,
              borderColor: '#fff'
            }
          }
        ],
        legend: {
          orient: 'vertical',
          type: 'scroll',
          height: 250,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0 , 0, .7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: function (params) {
            // console.log(params)
            const str = `${params.seriesName} <br />
            ${params.marker} ${params.data.legendname} <br />
            数量: ${params.data.value} <br />
            占比: ${params.data.percent}%
            `
            return str
          }
        }
      }
    },
    onPageChange (page) {
      this.renderTable(page)
    },
    renderTable (page) {
      this.tableData = this.totalData.slice((page - 1) * this.pageSize, (page - 1) * this.pageSize + this.pageSize)
    },
    renderLine () {
      const createOptions = (key) => {
        const data = []
        const axios = []
        this.wordcloud.forEach(item => {
          data.push(item[key])
          axios.push(item.word)
        })
        return {
          grid: {
            top: 0,
              bottom: 0,
              left: 0,
              right: 0
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            show: false,
            data: axios
          },
          yAxis: {
            show: false
          },
          series: [
            {
              type: 'line',
              data,
              areaStyle: {
                color: 'rgba(95,187,255,.5)'
              },
              lineStyle: {
                color: 'rgb(95,187,255)'
              },
              itemStyle: {
                opacity: 0
              },
              smooth: true
            }
          ]
        }
      }
      this.searchUserOptions = createOptions('user')
      this.searchNumberOptions = createOptions('count')
    },
    saleChange (value) {
      this.saleRankSelect = value
      this.renderPie()
    }
  },
  watch: {
    wordcloud () {
      const totalData = []
      this.wordcloud.forEach((item, index) => {
        totalData.push({
          id: index + 1,
          rank: index + 1,
          keyword: item.word,
          count: item.count,
          users: item.user,
          range: `${((item.user / item.count) * 100).toFixed(2)}%`
        })
      })
      this.totalData = totalData
      this.total = totalData.length
      this.renderTable(1)
      this.userCount = totalData.reduce((s, i) => i.users + s, 0)
      this.searchCount = totalData.reduce((s, i) => i.count + s, 0)
      this.renderLine()
    },
    category () {
      this.renderPie()
    }
  }
}
</script>

<style scoped lang="scss">
 .bottom-view{
   margin-top: 20px;
   .header3{
     font-size: 14px;
     font-weight: 900;
     border-bottom: 1px solid #eee;
     padding: 16px 20px;
   }
   .content-wrapper{
     height: 452px;
   }
   .charts{
     display: flex;
     box-sizing: border-box;
     .charts-item{
       flex: 1;
       &:first-of-type{
         padding-right: 10px;
       }
       &:last-of-type{
         padding-left: 10px;
       }
       .echarts{
         height: 56px;
       }
       h2{
         color: #999999;
         font-size: 12px;
         font-weight: normal;
       }
       .count{
         font-size: 18px;
         font-weight: 900;
       }
     }
   }
   .table-wrapper{
     margin-top: 20px ;
     .el-pagination{
       display: flex;
       justify-content: flex-end;
       margin-top: 20px;
     }
   }
   .header-wrapper{
     position: relative;
     .el-radio-group {
       position: absolute;
       top: 10px;
       right: 10px;
     }
   }
   .pie-charts{
     display: flex;
     flex-direction: column;
     height: 452px;
   }
 }
</style>
